<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>商品单位</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<script type="text/javascript" src="${ctxFront }/sortable/touch-sortable.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//初始化content高度
			initBodySize();
			//初始化sortable插件
			$(".sortable").sortable({
		    	onComplete: function(ul){
		    		// Put your code here!
		    		var num=$(ul).nextAll().length, max=$(".sortable li").length;
					if(max==1 || parseInt($(ul).attr("id")) == (max-num-1)) return;
		    		onComplete(ul);
		    		touchUpdateSort();
		    	}
		    });
			$("#listForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		
        //增加或删除
        function addOrDelUnit(id,type){
        	if(type == 1){//删除
        		id = $("input[name='rId']").val();
				window.location.href = "${ctx}/ivm/product/unit/delete?id="+id;
        	}else{//新增
				window.location.href = "${ctx}/ivm/product/unit/form";
        	}
		}
		
		//打开删除确认面板
		function checkDelete(id){
			$("#delPopup").popup("open");
			$("input[name='rId']").val(id);
		}
		
		function updateSort() {
			loading("正在提交，请稍等...");
	    	$("#listForm").attr("action", "${ctx}/ivm/product/unit/updateSort");
	    	$("#listForm").submit();
    	}
    	
    	function touchUpdateSort(){
    		var ids = [];
    		var sorts = [];
    		$("input[name='ids']").each(function(){
    			ids.push($(this).val());
    		});
    		$("input[name='sorts']").each(function(){
    			sorts.push($(this).val());
    		});
			var param = "ids="+ids+"&sorts="+sorts;
			loading("正在提交，请稍等...");
			//异步获取更多
			$.ajax({
				type: 'get',
				url: '${ctx}/ivm/product/unit/touch/updateSort',
				data: param,
				dataType: 'json',
				success: function(data){
					hideLoader();
					if(data!=null){
						if(data.status=200){
							$("ul.sortable").listview('refresh');
						}else{ error(); }
					}else{ error(); }
				},
				failure: function(){ error(); }				
			});
    	}
	</script>
</head>
<body data-role="page">
	<div data-role="header" class="ui-header" data-position="fixed" data-tap-toggle="false">
		<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
			<a href="${ctx }/ivm/merchant/set"><img class="head-back-icon" src="${ctxFront}/images/head/android/back.png"/></a>
	    </div>
	    <h1>商品单位</h1>
	    <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
	        <a href="${ctx}/ivm/product/unit/form" class="float-right"><img class="head-add-icon" src="${ctxFront}/images/head/android/add.png"/></a>
			<a href="#" onclick="updateSort()" class="float-right"><img class="head-save_sort-icon" src="${ctxFront}/images/head/android/save_sort.png"/></a>
	    </div>
	</div>
	<div role="main" class="ui-content custom-content">
		<tags:mbmessage content="${message}"/>
		<c:if test="${page.count != 0}">
		<form:form id="listForm" method="post">
		<ul data-role="listview" class="sortable">
			<c:forEach items="${page.list}" var="productUnit" varStatus="vs">
	        	<li id="${vs.index }" sort="${productUnit.sort}" class="ui-li-thumb" data-icon="false">
		        	<a href="javascript:" onclick="document.location='${ctx}/ivm/product/unit/form?id=${productUnit.id}'">${productUnit.number}${productUnit.name}</a>
		        	<p class="ui-li-aside" style="margin-right: 50px; margin-top: -10px;">
		        		<shiro:hasPermission name="ivm:product:unit:edit">
							<input type="hidden" name="ids" value="${productUnit.id}"/>
							<input name="sorts" type="text" value="${productUnit.sort}" style="width:50px;margin:0;padding:0;text-align:center;" class="required digits">
						</shiro:hasPermission>
						<shiro:lacksPermission name="ivm:product:unit:edit">
							${productUnit.sort}
						</shiro:lacksPermission>
		        	</p>
		        	<p class="ui-li-aside" style="margin-right:-20px">
		        		<shiro:hasPermission name="ivm:product:unit:edit">
		        		<img class="ui-li-del" onclick="checkDelete('${productUnit.id}')" src="${ctxFront }/images/red_del.png"/>
		        		</shiro:hasPermission>
		        	</p>
	        	</li>
	        </c:forEach>
	    </ul>
	    </form:form>
	    </c:if>
	    <c:if test="${page.count == 0}">
	    	暂无单位.
	    </c:if>
	    <div data-role="popup" id="delPopup" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
			<div data-role="header" data-theme="a">
		    	<h1>删除</h1>
		    </div>
		    <div role="main" class="ui-content">
		        <h3 class="ui-title">是否确定删除？</h3>
		        <input type="hidden" id="rId" name="rId" value=""/>
		        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" onclick="addOrDelUnit(0,1)">确定</a>
		        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-rel="back">返回</a>
		    </div>
		</div>
	</div>
	<%@include file="/WEB-INF/views/mobile/layouts/menu.jsp" %>
</body>
</html>
